<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>舞动健康</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入FontAwesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: {
                            light: '#ff7eb3',
                            DEFAULT: '#d44bdf',
                            dark: '#a742df',
                        }
                    },
                    fontFamily: {
                        sans: ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif']
                    },
                }
            }
        }
    </script>
    <style>
        .gradient-bg {
            background: linear-gradient(135deg, #a742df 0%, #ff7eb3 100%);
        }
        
        .gradient-text {
            background: linear-gradient(135deg, #a742df 0%, #ff7eb3 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .coach-marker {
            position: absolute;
            transform: translate(-50%, -50%);
            cursor: pointer;
        }
        
        .coach-avatar {
            box-shadow: 0 2px 6px rgba(0,0,0,0.2);
            transition: transform 0.2s, box-shadow 0.2s;
        }
        
        .coach-avatar:hover {
            transform: scale(1.05);
            box-shadow: 0 4px 8px rgba(0,0,0,0.3);
        }
        
        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }
        
        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
    </style>
</head>
<body class="font-sans bg-gray-50 text-gray-800 max-w-md mx-auto min-h-screen">
    <!-- 页面内容区 -->
    <main class="relative min-h-screen pb-16">
        <!-- 地图区域 -->
        <div class="relative w-full h-[520px]">
            <img src="https://images.unsplash.com/photo-1569336415962-a4bd9f69cd83?q=80&w=2000&auto=format&fit=crop" 
                 alt="地图" class="w-full h-full object-cover">
            
            <!-- 顶部搜索和消息 -->
            <div class="absolute top-[35px] left-0 right-0 px-4 flex items-center justify-between z-10">
                <!-- 搜索框 -->
                <div class="flex-1 bg-white rounded-full shadow-md h-10 flex items-center px-4 mr-3">
                    <!-- 添加定位 -->
                    <div class="flex items-center pr-2 border-r border-gray-200 min-w-[60px]">
                        <i class="fa-solid fa-location-dot text-primary-dark mr-1"></i>
                        <span class="text-sm font-medium whitespace-nowrap">北京</span>
                        <i class="fa-solid fa-chevron-down text-xs text-gray-400 ml-1"></i>
                    </div>
                    <i class="fa-solid fa-magnifying-glass text-gray-400 mx-2"></i>
                    <input type="text" placeholder="搜索附近的教练、场馆" class="w-[70%] outline-none text-sm bg-transparent">
                </div>
                
                <!-- 消息按钮 -->
                <div class="relative">
                    <button class="w-10 h-10 bg-white rounded-full shadow-md flex items-center justify-center">
                        <i class="fa-solid fa-bell text-gray-600"></i>
                    </button>
                    <span class="absolute -top-1 -right-1 w-5 h-5 bg-red-500 text-white text-xs rounded-full flex items-center justify-center">3</span>
                </div>
            </div>
            
            <!-- 正在进行的服务提示卡片 -->
            <div class="absolute bottom-[39px] left-0 right-0 px-4 flex justify-center z-10">
                <div class="w-full bg-white rounded-full shadow-md flex items-center justify-between px-5 py-3">
                    <span class="text-sm font-medium">您有一项瑜伽服务正在进行</span>
                    <a href="order_detail.html" class="px-4 py-1 bg-pink-400 text-white text-sm rounded-full">查看</a>
                </div>
            </div>
            
            <!-- 距离标记 -->
            <div class="absolute top-32 left-64">
                <div class="bg-teal-500 text-white px-2 py-1 rounded-md text-xs">
                    距离更近
                </div>
            </div>
            
            <!-- 教练标记 -->
            <div class="coach-marker coach-舞蹈" style="top: 40%; left: 30%;" onclick="window.location.href='coach_detail.html'">
                <div class="coach-avatar w-10 h-10 rounded-full bg-white border-2 border-primary-dark flex items-center justify-center overflow-hidden">
                    <img src="https://images.unsplash.com/photo-1534308143481-c55f00be8bd7?q=80&w=300&auto=format&fit=crop" 
                         alt="教练头像" class="w-full h-full object-cover">
                </div>
                <div class="absolute -bottom-1 right-0 bg-primary-dark text-white text-xs rounded-full h-5 w-5 flex items-center justify-center font-bold">教</div>
            </div>
            
            <div class="coach-marker coach-瑜伽" style="top: 55%; left: 50%;" onclick="window.location.href='coach_detail.html'">
                <div class="coach-avatar w-10 h-10 rounded-full bg-white border-2 border-primary-dark flex items-center justify-center overflow-hidden">
                    <img src="https://images.unsplash.com/photo-1569078449082-31e452b3a3ef?q=80&w=300&auto=format&fit=crop" 
                         alt="教练头像" class="w-full h-full object-cover">
                </div>
                <div class="absolute -bottom-1 right-0 bg-primary-dark text-white text-xs rounded-full h-5 w-5 flex items-center justify-center font-bold">教</div>
            </div>
            
            <div class="coach-marker coach-健身" style="top: 35%; left: 70%;" onclick="window.location.href='coach_detail.html'">
                <div class="coach-avatar w-10 h-10 rounded-full bg-white border-2 border-primary-dark flex items-center justify-center overflow-hidden">
                    <img src="https://images.unsplash.com/photo-1618019259998-0120cc4461cd?q=80&w=300&auto=format&fit=crop" 
                         alt="教练头像" class="w-full h-full object-cover">
                </div>
                <div class="absolute -bottom-1 right-0 bg-primary-dark text-white text-xs rounded-full h-5 w-5 flex items-center justify-center font-bold">教</div>
            </div>
            
            <!-- 疗愈教练 -->
            <div class="coach-marker coach-疗愈" style="top: 45%; left: 20%; display: none;" onclick="window.location.href='coach_detail.html'">
                <div class="coach-avatar w-10 h-10 rounded-full bg-white border-2 border-primary-dark flex items-center justify-center overflow-hidden">
                    <img src="https://images.unsplash.com/photo-1542103749-8ef59b94f47e?q=80&w=300&auto=format&fit=crop" 
                         alt="教练头像" class="w-full h-full object-cover">
                </div>
                <div class="absolute -bottom-1 right-0 bg-primary-dark text-white text-xs rounded-full h-5 w-5 flex items-center justify-center font-bold">教</div>
            </div>
            
            <!-- 高尔夫教练 -->
            <div class="coach-marker coach-高尔夫" style="top: 60%; left: 65%; display: none;" onclick="window.location.href='coach_detail.html'">
                <div class="coach-avatar w-10 h-10 rounded-full bg-white border-2 border-primary-dark flex items-center justify-center overflow-hidden">
                    <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=300&auto=format&fit=crop" 
                         alt="教练头像" class="w-full h-full object-cover">
                </div>
                <div class="absolute -bottom-1 right-0 bg-primary-dark text-white text-xs rounded-full h-5 w-5 flex items-center justify-center font-bold">教</div>
            </div>
        </div>
        
        <div class="bg-white relative z-10 shadow-sm" style="border-top-left-radius: 24px; border-top-right-radius: 24px; margin-top: -24px;">
            <!-- 服务类型切换功能 -->
            <script>
                function switchCoachType(type) {
                    // 隐藏所有教练标记
                    const allCoachMarkers = document.querySelectorAll('.coach-marker');
                    allCoachMarkers.forEach(marker => {
                        marker.style.display = 'none';
                    });
                    
                    // 根据类型显示对应教练
                    const typeCoachMarkers = document.querySelectorAll('.coach-' + type);
                    typeCoachMarkers.forEach(marker => {
                        marker.style.display = 'block';
                    });
                    
                    // 更新服务类型文本
                    document.getElementById('service-type-text').innerText = type;
                }
            </script>
            
            <!-- 服务类型展示 -->
            <div class="px-4 py-4 border-b border-gray-100 flex justify-between">
                <a href="#" class="flex flex-col items-center" onclick="switchCoachType('舞蹈'); return false;">
                    <div class="w-12 h-12 rounded-full bg-pink-50 flex items-center justify-center mb-1">
                        <i class="fa-solid fa-music text-xl text-pink-500"></i>
                    </div>
                    <span class="text-xs">舞蹈</span>
                </a>
                <a href="#" class="flex flex-col items-center" onclick="switchCoachType('健身'); return false;">
                    <div class="w-12 h-12 rounded-full bg-blue-50 flex items-center justify-center mb-1">
                        <i class="fa-solid fa-dumbbell text-xl text-blue-500"></i>
                    </div>
                    <span class="text-xs">健身</span>
                </a>
                <a href="#" class="flex flex-col items-center" onclick="switchCoachType('瑜伽'); return false;">
                    <div class="w-12 h-12 rounded-full bg-green-50 flex items-center justify-center mb-1">
                        <i class="fa-solid fa-spa text-xl text-green-500"></i>
                    </div>
                    <span class="text-xs">瑜伽</span>
                </a>
                <a href="#" class="flex flex-col items-center" onclick="switchCoachType('疗愈'); return false;">
                    <div class="w-12 h-12 rounded-full bg-purple-50 flex items-center justify-center mb-1">
                        <i class="fa-solid fa-hand-holding-heart text-xl text-purple-500"></i>
                    </div>
                    <span class="text-xs">疗愈</span>
                </a>
                <a href="#" class="flex flex-col items-center" onclick="switchCoachType('高尔夫'); return false;">
                    <div class="w-12 h-12 rounded-full bg-green-50 flex items-center justify-center mb-1">
                        <i class="fa-solid fa-golf-ball-tee text-xl text-green-600"></i>
                    </div>
                    <span class="text-xs">高尔夫</span>
                </a>
            </div>
            
            <!-- 上次预约信息 -->
            <div class="px-4 py-3 bg-white flex items-center justify-between" style="border-bottom: 1px solid #f1f1f1;">
                <div>
                    <span class="text-sm">上次预约Jazz 初级</span>
                </div>
                <a href="order_confirm.html" class="px-4 py-1 bg-pink-400 text-white text-sm rounded-full">再来一单</a>
            </div>
            
            <!-- 预约选项区域 -->
            <div class="p-4">
                <!-- 这里删除红框中的内容 -->
                
                <!-- 常用空间 -->
                <div class="mb-6">
                    <p class="text-sm text-gray-500 mb-2 ml-1">常用空间:</p>
                    <div class="flex items-center p-3 bg-gray-50 rounded-xl border border-gray-100 hover:border-primary-light cursor-pointer">
                        <div class="w-8 h-8 rounded-full flex items-center justify-center bg-blue-100 mr-3">
                            <i class="fa-solid fa-dumbbell text-blue-500 text-sm"></i>
                        </div>
                        <div class="flex-1">
                            <span class="text-base font-medium text-gray-700">上地公牛健身房</span>
                        </div>
                        <div onclick="showSpaceListModal()" class="cursor-pointer">
                            <span class="text-sm text-primary-dark">选择其他空间</span>
                            <i class="fa-solid fa-angle-right text-primary-dark ml-1"></i>
                        </div>
                    </div>
                </div>
                
                <!-- 服务配置项 -->
                <div class="grid grid-cols-2 gap-3 mb-5">
                    <!-- 服务时间选择 -->
                    <div class="flex  p-2 bg-gray-50 rounded-xl border border-gray-100 hover:border-primary-light cursor-pointer" onclick="showTimeModal()"
                    style="align-items: center;justify-content: space-between;">
                        <span class="text-sm text-gray-500">服务时间:</span>
                        <div class="flex items-center mt-1">
                            <span class="text-base font-medium text-primary-dark time-select">现在</span>
                            <i class="fa-solid fa-chevron-right text-xs text-gray-400 ml-1"></i>
                        </div>
                    </div>
                    
                    <!-- 课时选择 -->
                    <div  style="align-items: center;justify-content: space-between;"  class="flex  p-2 bg-gray-50 rounded-xl border border-gray-100 hover:border-primary-light cursor-pointer" onclick="showDurationModal()">
                        <span class="text-sm text-gray-500">课时:</span>
                        <div class="flex items-center mt-1">
                            <span class="text-base font-medium text-primary-dark duration-select">60min</span>
                            <i class="fa-solid fa-chevron-right text-xs text-gray-400 ml-1"></i>
                        </div>
                    </div>
                    
                    <!-- 教练类别选择 -->
                    <div  style="align-items: center;justify-content: space-between;"  class="flex  p-2 bg-gray-50 rounded-xl border border-gray-100 hover:border-primary-light cursor-pointer" onclick="showCoachModal()">
                        <span class="text-sm text-gray-500">教练类别:</span>
                        <div class="flex items-center mt-1">
                            <span class="text-base font-medium text-primary-dark coach-type-select">优选</span>
                            <i class="fa-solid fa-chevron-right text-xs text-gray-400 ml-1"></i>
                        </div>
                    </div>
                    
                    <!-- 服务类型选择 -->
                    <div  style="align-items: center;justify-content: space-between;"  class="flex  p-2 bg-gray-50 rounded-xl border border-gray-100 hover:border-primary-light cursor-pointer" onclick="showDanceTypesModal()">
                        <span class="text-sm text-gray-500">服务类型:</span>
                        <div class="flex items-center mt-1">
                            <span id="service-type-text" class="text-base font-medium text-primary-dark">舞蹈</span>
                            <i class="fa-solid fa-chevron-right text-xs text-gray-400 ml-1"></i>
                        </div>
                    </div>
                </div>
                
                <!-- 预约偏好和服务定价说明 -->
                <div class="grid grid-cols-2 gap-4 mb-5">
                    <div onclick="showPreferenceModal()" class="flex items-center p-2 cursor-pointer hover:bg-gray-50 rounded-lg transition-colors">
                        <i class="fa-solid fa-sliders text-gray-400 mr-2"></i>
                        <span class="text-sm text-gray-400">预约偏好设置</span>
                        <i class="fa-solid fa-chevron-right text-xs text-gray-300 ml-1"></i>
                    </div>
                    <div onclick="showPricingInfoModal()" class="flex items-center justify-end p-2 cursor-pointer hover:bg-gray-50 rounded-lg transition-colors">
                        <i class="fa-solid fa-circle-info text-gray-400 mr-2"></i>
                        <span class="text-sm text-gray-400">服务定价说明</span>
                        <i class="fa-solid fa-chevron-right text-xs text-gray-300 ml-1"></i>
                    </div>
                </div>
                
                <!-- 金额和立即下单按钮 -->
                <div class="mt-6">
                    <div class="flex rounded-full overflow-hidden shadow-md">
                        <div class="bg-gray-100 py-4 px-5 flex-1 rounded-l-full">
                            <span class="text-gray-700 font-medium">合计金额: <span class="font-semibold text-lg text-primary-dark">¥200</span></span>
                        </div>
                        <a href="service.html" class="gradient-bg text-white py-4 px-8 text-center font-medium text-lg rounded-full">
                            立即下单
                        </a>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 底部导航栏 -->
        <div class="fixed bottom-0 left-0 right-0 z-30 max-w-md mx-auto bg-white border-t border-gray-100 shadow">
            <div class="grid grid-cols-5 py-2">
                <a href="#" class="flex flex-col items-center text-primary-dark">
                    <i class="fa-solid fa-house text-xl mb-0.5"></i>
                    <span class="text-xs font-medium">首页</span>
                </a>
                <a href="coach.html" class="flex flex-col items-center text-gray-500">
                    <i class="fa-solid fa-user-tie text-xl mb-0.5"></i>
                    <span class="text-xs">教练</span>
                </a>
                <a href="venue.html" class="flex flex-col items-center text-gray-500">
                    <i class="fa-solid fa-building text-xl mb-0.5"></i>
                    <span class="text-xs">空间</span>
                </a>
                <a href="service.html" class="flex flex-col items-center text-gray-500">
                    <i class="fa-solid fa-clipboard-list text-xl mb-0.5"></i>
                    <span class="text-xs">服务</span>
                </a>
                <a href="my.html" class="flex flex-col items-center text-gray-500">
                    <i class="fa-solid fa-user text-xl mb-0.5"></i>
                    <span class="text-xs">我的</span>
                </a>
            </div>
        </div>
    </main>
    
    <!-- 预约时间选择弹窗 -->
    <div id="timeModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden" onclick="hideModal('timeModal')">
        <div class="absolute bottom-0 left-0 right-0 bg-white rounded-t-2xl max-w-md mx-auto" style="height: 50vh;" onclick="event.stopPropagation()">
            <div class="p-4 border-b border-gray-100 flex justify-between items-center">
                <h3 class="text-lg font-medium">选择预约时间</h3>
                <button class="w-8 h-8 flex items-center justify-center" onclick="hideModal('timeModal')">
                    <i class="fa-solid fa-xmark text-gray-400"></i>
                </button>
            </div>
            <div class="p-4 max-h-[40vh] overflow-y-auto">
                <div class="space-y-2">
                    <div class="p-3 border border-primary-dark bg-purple-50 rounded-lg flex items-center" onclick="selectTime('现在')">
                        <div class="flex-1">
                            <div class="font-medium text-primary-dark">现在</div>
                            <div class="text-xs text-gray-500 mt-1">立即预约服务</div>
                        </div>
                        <i class="fa-solid fa-check text-primary-dark"></i>
                    </div>
                    
                    <div class="p-3 border border-gray-200 rounded-lg flex items-center" onclick="selectTime('半小时后')">
                        <div class="flex-1">
                            <div class="font-medium">半小时后</div>
                            <div class="text-xs text-gray-500 mt-1">预约半小时后服务</div>
                        </div>
                    </div>
                    
                    <div class="p-3 border border-gray-200 rounded-lg flex items-center" onclick="selectTime('一小时后')">
                        <div class="flex-1">
                            <div class="font-medium">一小时后</div>
                            <div class="text-xs text-gray-500 mt-1">预约一小时后服务</div>
                        </div>
                    </div>
                    
                    <div class="p-3 border border-gray-200 rounded-lg flex items-center" onclick="selectTime('自定义时间')">
                        <div class="flex-1">
                            <div class="font-medium">自定义时间</div>
                            <div class="text-xs text-gray-500 mt-1">选择特定时间</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="p-4">
                <button class="w-full py-3 gradient-bg text-white rounded-full" onclick="hideModal('timeModal')">
                    确认
                </button>
            </div>
        </div>
    </div>
    
    <!-- 教练标签选择弹窗 -->
    <div id="coachModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden" onclick="hideModal('coachModal')">
        <div class="absolute bottom-0 left-0 right-0 bg-white rounded-t-2xl max-w-md mx-auto" style="height: 50vh;" onclick="event.stopPropagation()">
            <div class="p-4 border-b border-gray-100 flex justify-between items-center">
                <h3 class="text-lg font-medium">选择教练标签</h3>
                <button class="w-8 h-8 flex items-center justify-center" onclick="hideModal('coachModal')">
                    <i class="fa-solid fa-xmark text-gray-400"></i>
                </button>
            </div>
            <div class="p-4 max-h-[40vh] overflow-y-auto">
                <div class="space-y-2">
                    <div class="p-3 border border-primary-dark bg-purple-50 rounded-lg flex items-center" onclick="selectCoachType('优选')">
                        <div class="flex-1">
                            <div class="font-medium text-primary-dark">优选</div>
                            <div class="text-xs text-gray-500 mt-1">平台严选的优质教练</div>
                        </div>
                        <i class="fa-solid fa-check text-primary-dark"></i>
                    </div>
                    
                    <div class="p-3 border border-gray-200 rounded-lg flex items-center" onclick="selectCoachType('银牌教练')">
                        <div class="flex-1">
                            <div class="font-medium">银牌教练</div>
                            <div class="text-xs text-gray-500 mt-1">3-5年教龄，服务评分4.5以上</div>
                        </div>
                    </div>
                    
                    <div class="p-3 border border-gray-200 rounded-lg flex items-center" onclick="selectCoachType('金牌教练')">
                        <div class="flex-1">
                            <div class="font-medium">金牌教练</div>
                            <div class="text-xs text-gray-500 mt-1">5年以上教龄，服务评分4.8以上</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="p-4">
                <button class="w-full py-3 gradient-bg text-white rounded-full" onclick="hideModal('coachModal')">
                    确认
                </button>
            </div>
        </div>
    </div>
    
    <!-- 舞蹈类型选择弹窗 -->
    <div id="danceTypesModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden" onclick="hideModal('danceTypesModal')">
        <div class="absolute bottom-0 left-0 right-0 bg-white rounded-t-2xl max-w-md mx-auto" style="height: 50vh;" onclick="event.stopPropagation()">
            <div class="p-4 border-b border-gray-100 flex justify-between items-center">
                <h3 class="text-lg font-medium">选择舞蹈类型</h3>
                <button class="w-8 h-8 flex items-center justify-center" onclick="hideModal('danceTypesModal')">
                    <i class="fa-solid fa-xmark text-gray-400"></i>
                </button>
            </div>
            <div class="p-4 max-h-[40vh] overflow-y-auto">
                <div class="grid grid-cols-2 gap-3">
                    <div class="p-3 border border-primary-dark bg-purple-50 rounded-lg text-center" onclick="selectServiceType('Jazz')">
                        <div class="font-medium text-primary-dark">Jazz</div>
                    </div>
                    <div class="p-3 border border-gray-200 rounded-lg text-center" onclick="selectServiceType('Hiphop')">
                        <div class="font-medium">Hiphop</div>
                    </div>
                    <div class="p-3 border border-gray-200 rounded-lg text-center" onclick="selectServiceType('编舞')">
                        <div class="font-medium">编舞</div>
                    </div>
                    <div class="p-3 border border-gray-200 rounded-lg text-center" onclick="selectServiceType('古典舞')">
                        <div class="font-medium">古典舞</div>
                    </div>
                    <div class="p-3 border border-gray-200 rounded-lg text-center" onclick="selectServiceType('现代舞')">
                        <div class="font-medium">现代舞</div>
                    </div>
                    <div class="p-3 border border-gray-200 rounded-lg text-center" onclick="selectServiceType('Kpop男团')">
                        <div class="font-medium">Kpop男团</div>
                    </div>
                    <div class="p-3 border border-gray-200 rounded-lg text-center" onclick="selectServiceType('Kpop女团')">
                        <div class="font-medium">Kpop女团</div>
                    </div>
                    <div class="p-3 border border-gray-200 rounded-lg text-center" onclick="selectServiceType('港风Jazz')">
                        <div class="font-medium">港风Jazz</div>
                    </div>
                    <div class="p-3 border border-gray-200 rounded-lg text-center" onclick="selectServiceType('国风Jazz')">
                        <div class="font-medium">国风Jazz</div>
                    </div>
                </div>
            </div>
            <div class="p-4">
                <button class="w-full py-3 gradient-bg text-white rounded-full" onclick="hideModal('danceTypesModal')">
                    确认
                </button>
            </div>
        </div>
    </div>
    
    <!-- 服务类型选择弹窗 -->
    <div id="serviceTypeModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden" onclick="hideModal('serviceTypeModal')">
        <div class="absolute bottom-0 left-0 right-0 bg-white rounded-t-2xl max-w-md mx-auto" style="height: 50vh;" onclick="event.stopPropagation()">
            <div class="p-4 border-b border-gray-100 flex justify-between items-center">
                <h3 class="text-lg font-medium">选择服务类型</h3>
                <button class="w-8 h-8 flex items-center justify-center" onclick="hideModal('serviceTypeModal')">
                    <i class="fa-solid fa-xmark text-gray-400"></i>
                </button>
            </div>
            <div class="p-4 max-h-[40vh] overflow-y-auto">
                <div class="grid grid-cols-1 gap-3">
                    <div class="p-3 border border-primary-dark bg-purple-50 rounded-lg flex items-center">
                        <div class="w-10 h-10 rounded-full bg-pink-50 flex items-center justify-center mr-3">
                            <i class="fa-solid fa-music text-lg text-pink-500"></i>
                        </div>
                        <div class="flex-1">
                            <div class="font-medium text-primary-dark">舞蹈</div>
                            <div class="text-xs text-gray-500 mt-1">包括爵士、街舞、芭蕾等多种舞蹈形式</div>
                        </div>
                        <i class="fa-solid fa-check text-primary-dark"></i>
                    </div>
                    <div class="p-3 border border-gray-200 rounded-lg flex items-center">
                        <div class="w-10 h-10 rounded-full bg-blue-50 flex items-center justify-center mr-3">
                            <i class="fa-solid fa-dumbbell text-lg text-blue-500"></i>
                        </div>
                        <div class="flex-1">
                            <div class="font-medium">健身</div>
                            <div class="text-xs text-gray-500 mt-1">力量训练、有氧运动、功能性训练等</div>
                        </div>
                    </div>
                    <div class="p-3 border border-gray-200 rounded-lg flex items-center">
                        <div class="w-10 h-10 rounded-full bg-green-50 flex items-center justify-center mr-3">
                            <i class="fa-solid fa-spa text-lg text-green-500"></i>
                        </div>
                        <div class="flex-1">
                            <div class="font-medium">瑜伽</div>
                            <div class="text-xs text-gray-500 mt-1">哈他瑜伽、热瑜伽、阴瑜伽等多种形式</div>
                        </div>
                    </div>
                    <div class="p-3 border border-gray-200 rounded-lg flex items-center">
                        <div class="w-10 h-10 rounded-full bg-purple-50 flex items-center justify-center mr-3">
                            <i class="fa-solid fa-hand-holding-heart text-lg text-purple-500"></i>
                        </div>
                        <div class="flex-1">
                            <div class="font-medium">疗愈</div>
                            <div class="text-xs text-gray-500 mt-1">按摩、冥想、呼吸练习等身心放松服务</div>
                        </div>
                    </div>
                    <div class="p-3 border border-gray-200 rounded-lg flex items-center">
                        <div class="w-10 h-10 rounded-full bg-green-50 flex items-center justify-center mr-3">
                            <i class="fa-solid fa-golf-ball-tee text-lg text-green-600"></i>
                        </div>
                        <div class="flex-1">
                            <div class="font-medium">高尔夫</div>
                            <div class="text-xs text-gray-500 mt-1">高尔夫教学、练习和陪练服务</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="p-4">
                <button class="w-full py-3 gradient-bg text-white rounded-full" onclick="hideModal('serviceTypeModal')">
                    确认
                </button>
            </div>
        </div>
    </div>

    <!-- 课时选择弹窗 -->
    <div id="durationModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden" onclick="hideModal('durationModal')">
        <div class="absolute bottom-0 left-0 right-0 bg-white rounded-t-2xl max-w-md mx-auto" style="height: 50vh;" onclick="event.stopPropagation()">
            <div class="p-4 border-b border-gray-100 flex justify-between items-center">
                <h3 class="text-lg font-medium">选择课时</h3>
                <button class="w-8 h-8 flex items-center justify-center" onclick="hideModal('durationModal')">
                    <i class="fa-solid fa-xmark text-gray-400"></i>
                </button>
            </div>
            <div class="p-4 max-h-[40vh] overflow-y-auto">
                <div class="space-y-2">
                    <div class="p-3 border border-primary-dark bg-purple-50 rounded-lg flex items-center" onclick="selectDuration('60min')">
                        <div class="flex-1">
                            <div class="font-medium text-primary-dark">60min</div>
                            <div class="text-xs text-gray-500 mt-1">标准课时</div>
                        </div>
                        <i class="fa-solid fa-check text-primary-dark"></i>
                    </div>
                    
                    <div class="p-3 border border-gray-200 rounded-lg flex items-center" onclick="selectDuration('90min')">
                        <div class="flex-1">
                            <div class="font-medium">90min</div>
                            <div class="text-xs text-gray-500 mt-1">进阶课时</div>
                        </div>
                    </div>
                    
                    <div class="p-3 border border-gray-200 rounded-lg flex items-center" onclick="selectDuration('120min')">
                        <div class="flex-1">
                            <div class="font-medium">120min</div>
                            <div class="text-xs text-gray-500 mt-1">专业课时</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="p-4">
                <button class="w-full py-3 gradient-bg text-white rounded-full" onclick="hideModal('durationModal')">
                    确认
                </button>
            </div>
        </div>
    </div>

    <!-- 空间列表选择弹窗 -->
    <div id="spaceListModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden" onclick="hideModal('spaceListModal')">
        <div class="absolute bottom-0 left-0 right-0 bg-white rounded-t-2xl max-w-md mx-auto" style="height: 60vh;" onclick="event.stopPropagation()">
            <div class="p-4 border-b border-gray-100 flex justify-between items-center">
                <h3 class="text-lg font-medium">选择其他空间</h3>
                <button class="w-8 h-8 flex items-center justify-center" onclick="hideModal('spaceListModal')">
                    <i class="fa-solid fa-xmark text-gray-400"></i>
                </button>
            </div>
            <div class="p-4 max-h-[50vh] overflow-y-auto">
                <div class="space-y-3">
                    <div class="p-4 border border-primary-dark bg-purple-50 rounded-lg" onclick="selectSpace('上地国际创业园东区', '¥180/小时')">
                        <div class="flex items-center mb-2">
                            <div class="w-10 h-10 rounded-full flex items-center justify-center bg-purple-100 mr-3">
                                <i class="fa-solid fa-location-dot text-primary-dark text-lg"></i>
                            </div>
                            <div class="flex-1">
                                <div class="font-medium text-primary-dark text-lg">上地国际创业园东区</div>
                                <div class="text-xs text-gray-500">海淀区上地三街</div>
                            </div>
                            <div class="bg-primary-light bg-opacity-20 rounded-full px-2 py-1">
                                <span class="text-xs text-primary-dark font-medium">0.5km</span>
                            </div>
                        </div>
                        <div class="flex flex-wrap gap-1 my-2">
                            <span class="text-xs bg-blue-50 text-blue-600 px-2 py-0.5 rounded-full">有空调</span>
                            <span class="text-xs bg-green-50 text-green-600 px-2 py-0.5 rounded-full">更衣室</span>
                            <span class="text-xs bg-purple-50 text-purple-600 px-2 py-0.5 rounded-full">WiFi</span>
                        </div>
                        <div class="flex justify-between items-center mt-3 pt-2 border-t border-purple-100">
                            <div class="flex items-center">
                                <i class="fa-solid fa-star text-yellow-400 text-xs mr-1"></i>
                                <span class="text-sm text-gray-600">4.9分</span>
                            </div>
                            <div class="text-sm font-medium text-primary-dark">¥180/小时</div>
                        </div>
                    </div>
                    
                    <div class="p-4 border border-gray-200 rounded-lg" onclick="selectSpace('上地公牛健身房', '¥200/小时')">
                        <div class="flex items-center mb-2">
                            <div class="w-10 h-10 rounded-full flex items-center justify-center bg-blue-100 mr-3">
                                <i class="fa-solid fa-dumbbell text-blue-500 text-lg"></i>
                            </div>
                            <div class="flex-1">
                                <div class="font-medium text-lg">上地公牛健身房</div>
                                <div class="text-xs text-gray-500">海淀区上地东路</div>
                            </div>
                            <div class="bg-gray-100 rounded-full px-2 py-1">
                                <span class="text-xs text-gray-600 font-medium">1.2km</span>
                            </div>
                        </div>
                        <div class="flex flex-wrap gap-1 my-2">
                            <span class="text-xs bg-blue-50 text-blue-600 px-2 py-0.5 rounded-full">有空调</span>
                            <span class="text-xs bg-green-50 text-green-600 px-2 py-0.5 rounded-full">更衣室</span>
                            <span class="text-xs bg-yellow-50 text-yellow-600 px-2 py-0.5 rounded-full">热水</span>
                            <span class="text-xs bg-red-50 text-red-600 px-2 py-0.5 rounded-full">淋浴</span>
                        </div>
                        <div class="flex justify-between items-center mt-3 pt-2 border-t border-gray-100">
                            <div class="flex items-center">
                                <i class="fa-solid fa-star text-yellow-400 text-xs mr-1"></i>
                                <span class="text-sm text-gray-600">4.7分</span>
                            </div>
                            <div class="text-sm font-medium text-primary-dark">¥200/小时</div>
                        </div>
                    </div>
                    
                    <div class="p-4 border border-gray-200 rounded-lg" onclick="selectSpace('悦思瑜伽馆', '¥220/小时')">
                        <div class="flex items-center mb-2">
                            <div class="w-10 h-10 rounded-full flex items-center justify-center bg-green-100 mr-3">
                                <i class="fa-solid fa-spa text-green-500 text-lg"></i>
                            </div>
                            <div class="flex-1">
                                <div class="font-medium text-lg">悦思瑜伽馆</div>
                                <div class="text-xs text-gray-500">海淀区西二旗大街</div>
                            </div>
                            <div class="bg-gray-100 rounded-full px-2 py-1">
                                <span class="text-xs text-gray-600 font-medium">2.8km</span>
                            </div>
                        </div>
                        <div class="flex flex-wrap gap-1 my-2">
                            <span class="text-xs bg-blue-50 text-blue-600 px-2 py-0.5 rounded-full">有空调</span>
                            <span class="text-xs bg-green-50 text-green-600 px-2 py-0.5 rounded-full">更衣室</span>
                            <span class="text-xs bg-purple-50 text-purple-600 px-2 py-0.5 rounded-full">WiFi</span>
                            <span class="text-xs bg-orange-50 text-orange-600 px-2 py-0.5 rounded-full">储物柜</span>
                        </div>
                        <div class="flex justify-between items-center mt-3 pt-2 border-t border-gray-100">
                            <div class="flex items-center">
                                <i class="fa-solid fa-star text-yellow-400 text-xs mr-1"></i>
                                <span class="text-sm text-gray-600">4.8分</span>
                            </div>
                            <div class="text-sm font-medium text-primary-dark">¥220/小时</div>
                        </div>
                    </div>
                    
                    <div class="p-4 border border-gray-200 rounded-lg" onclick="selectSpace('舞动空间舞蹈室', '¥250/小时')">
                        <div class="flex items-center mb-2">
                            <div class="w-10 h-10 rounded-full flex items-center justify-center bg-pink-100 mr-3">
                                <i class="fa-solid fa-music text-pink-500 text-lg"></i>
                            </div>
                            <div class="flex-1">
                                <div class="font-medium text-lg">舞动空间舞蹈室</div>
                                <div class="text-xs text-gray-500">朝阳区望京SOHO</div>
                            </div>
                            <div class="bg-gray-100 rounded-full px-2 py-1">
                                <span class="text-xs text-gray-600 font-medium">5.4km</span>
                            </div>
                        </div>
                        <div class="flex flex-wrap gap-1 my-2">
                            <span class="text-xs bg-blue-50 text-blue-600 px-2 py-0.5 rounded-full">有空调</span>
                            <span class="text-xs bg-green-50 text-green-600 px-2 py-0.5 rounded-full">更衣室</span>
                            <span class="text-xs bg-purple-50 text-purple-600 px-2 py-0.5 rounded-full">WiFi</span>
                            <span class="text-xs bg-pink-50 text-pink-600 px-2 py-0.5 rounded-full">音响</span>
                        </div>
                        <div class="flex justify-between items-center mt-3 pt-2 border-t border-gray-100">
                            <div class="flex items-center">
                                <i class="fa-solid fa-star text-yellow-400 text-xs mr-1"></i>
                                <span class="text-sm text-gray-600">4.9分</span>
                            </div>
                            <div class="text-sm font-medium text-primary-dark">¥250/小时</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="p-4">
                <button class="w-full py-3 gradient-bg text-white rounded-full" onclick="hideModal('spaceListModal')">
                    确认
                </button>
            </div>
        </div>
    </div>

    <!-- 预约偏好设置弹窗 -->
    <div id="preferenceModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden" onclick="hideModal('preferenceModal')">
        <div class="absolute bottom-0 left-0 right-0 bg-white rounded-t-2xl max-w-md mx-auto" style="height: 50vh;" onclick="event.stopPropagation()">
            <div class="p-4 border-b border-gray-100 flex justify-between items-center">
                <h3 class="text-lg font-medium">预约偏好设置</h3>
                <button class="w-8 h-8 flex items-center justify-center" onclick="hideModal('preferenceModal')">
                    <i class="fa-solid fa-xmark text-gray-400"></i>
                </button>
            </div>
            <div class="p-4 max-h-[40vh] overflow-y-auto">
                <div class="space-y-4">
                    <!-- 性别偏好 -->
                    <div>
                        <p class="text-sm font-medium text-gray-700 mb-2">教练性别偏好</p>
                        <div class="grid grid-cols-3 gap-2">
                            <div class="p-3 border border-primary-dark bg-purple-50 rounded-lg text-center">
                                <div class="font-medium text-primary-dark">不限</div>
                            </div>
                            <div class="p-3 border border-gray-200 rounded-lg text-center">
                                <div class="font-medium">男教练</div>
                            </div>
                            <div class="p-3 border border-gray-200 rounded-lg text-center">
                                <div class="font-medium">女教练</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 语言偏好 -->
                    <div>
                        <p class="text-sm font-medium text-gray-700 mb-2">语言偏好</p>
                        <div class="grid grid-cols-3 gap-2">
                            <div class="p-3 border border-primary-dark bg-purple-50 rounded-lg text-center">
                                <div class="font-medium text-primary-dark">中文</div>
                            </div>
                            <div class="p-3 border border-gray-200 rounded-lg text-center">
                                <div class="font-medium">英文</div>
                            </div>
                            <div class="p-3 border border-gray-200 rounded-lg text-center">
                                <div class="font-medium">双语</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 经验要求 -->
                    <div>
                        <p class="text-sm font-medium text-gray-700 mb-2">教练经验要求</p>
                        <div class="grid grid-cols-2 gap-2">
                            <div class="p-3 border border-primary-dark bg-purple-50 rounded-lg text-center">
                                <div class="font-medium text-primary-dark">不限</div>
                            </div>
                            <div class="p-3 border border-gray-200 rounded-lg text-center">
                                <div class="font-medium">5年以上</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="p-4">
                <button class="w-full py-3 gradient-bg text-white rounded-full" onclick="hideModal('preferenceModal')">
                    确认
                </button>
            </div>
        </div>
    </div>

    <!-- 服务定价说明弹窗 -->
    <div id="pricingInfoModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden" onclick="hideModal('pricingInfoModal')">
        <div class="absolute bottom-0 left-0 right-0 bg-white rounded-t-2xl max-w-md mx-auto" style="height: 50vh;" onclick="event.stopPropagation()">
            <div class="p-4 border-b border-gray-100 flex justify-between items-center">
                <h3 class="text-lg font-medium">服务定价说明</h3>
                <button class="w-8 h-8 flex items-center justify-center" onclick="hideModal('pricingInfoModal')">
                    <i class="fa-solid fa-xmark text-gray-400"></i>
                </button>
            </div>
            <div class="p-4 max-h-[40vh] overflow-y-auto">
                <div class="space-y-4">
                    <div class="rounded-lg border border-gray-100 p-4">
                        <div class="flex justify-between items-center mb-2">
                            <span class="font-medium">基础定价</span>
                            <span class="text-primary-dark font-medium">¥150</span>
                        </div>
                        <p class="text-sm text-gray-500">标准60分钟课时基础服务费用</p>
                    </div>
                    
                    <div class="rounded-lg border border-gray-100 p-4">
                        <div class="flex justify-between items-center mb-2">
                            <span class="font-medium">教练等级附加费</span>
                            <span class="text-primary-dark font-medium">¥50</span>
                        </div>
                        <p class="text-sm text-gray-500">优选教练服务品质溢价</p>
                    </div>
                    
                    <div class="rounded-lg border border-gray-100 p-4">
                        <div class="flex justify-between items-center mb-2">
                            <span class="font-medium">高峰时段服务费</span>
                            <span class="text-primary-dark font-medium">¥0</span>
                        </div>
                        <p class="text-sm text-gray-500">非高峰时段不收取额外费用</p>
                    </div>
                    
                    <div class="rounded-lg border border-primary-light border-dashed p-4 bg-pink-50">
                        <div class="flex justify-between items-center mb-2">
                            <span class="font-medium text-primary-dark">订单合计</span>
                            <span class="text-primary-dark font-semibold text-lg">¥200</span>
                        </div>
                        <p class="text-sm text-gray-600">所有费用均已包含在内，无隐藏收费</p>
                    </div>
                </div>
            </div>
            <div class="p-4">
                <button class="w-full py-3 gradient-bg text-white rounded-full" onclick="hideModal('pricingInfoModal')">
                    确认
                </button>
            </div>
        </div>
    </div>

    <script>
        // 显示隐藏弹窗的函数
        function showTimeModal() {
            document.getElementById('timeModal').classList.remove('hidden');
            document.body.style.overflow = 'hidden';
        }
        
        function showCoachModal() {
            document.getElementById('coachModal').classList.remove('hidden');
            document.body.style.overflow = 'hidden';
        }
        
        function showDanceTypesModal() {
            document.getElementById('danceTypesModal').classList.remove('hidden');
            document.body.style.overflow = 'hidden';
        }
        
        function showServiceTypeModal() {
            document.getElementById('serviceTypeModal').classList.remove('hidden');
            document.body.style.overflow = 'hidden';
        }
        
        function showDurationModal() {
            document.getElementById('durationModal').classList.remove('hidden');
            document.body.style.overflow = 'hidden';
        }
        
        function showSpaceListModal() {
            document.getElementById('spaceListModal').classList.remove('hidden');
            document.body.style.overflow = 'hidden';
        }
        
        function showPreferenceModal() {
            document.getElementById('preferenceModal').classList.remove('hidden');
            document.body.style.overflow = 'hidden';
        }
        
        function showPricingInfoModal() {
            document.getElementById('pricingInfoModal').classList.remove('hidden');
            document.body.style.overflow = 'hidden';
        }
        
        function hideModal(id) {
            document.getElementById(id).classList.add('hidden');
            document.body.style.overflow = '';
        }
        
        // 选择空间
        function selectSpace(spaceName, hourlyRate) {
            // 更新显示的空间名称
            const locationElements = document.querySelectorAll('.location-name');
            locationElements.forEach(element => {
                element.textContent = spaceName;
            });
            
            // 更新价格
            if (hourlyRate) {
                const priceElement = document.querySelector('.text-xl.font-semibold.text-primary-dark');
                if (priceElement) {
                    priceElement.textContent = hourlyRate;
                }
            }
            
            // 隐藏弹窗
            hideModal('spaceListModal');
        }
        
        // 选择服务时间
        function selectTime(time) {
            document.querySelector('.time-select').textContent = time;
            hideModal('timeModal');
        }
        
        // 选择课时
        function selectDuration(duration) {
            document.querySelector('.duration-select').textContent = duration;
            hideModal('durationModal');
        }
        
        // 选择教练类别
        function selectCoachType(coachType) {
            document.querySelector('.coach-type-select').textContent = coachType;
            hideModal('coachModal');
        }
        
        // 选择服务类型
        function selectServiceType(serviceType) {
            document.getElementById('service-type-text').textContent = serviceType;
            hideModal('danceTypesModal');
        }
        
        // 页面加载时初始化
        window.onload = function() {
            // 默认显示舞蹈教练
            switchCoachType('舞蹈');
        }
    </script>
</body>
</html> 